<template>
	<view class="sticky-bottom-box" :style="[boxStyle]">
		<view class="sticky-bottom-content-box" :style="[contentBoxStyle]">
			<view class="sticky-bottom-content" :style="[contentStyle]">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cu-sticky-bottom-box",
		props: {
			height: {
				type: Number,
				default: 120
			},
			position: {
				type: String,
				default: "bottom",
				validator: function(value) {
					return ['top', 'bottom'].includes(value)
				},
			},
			topPadding: {
				type: Number,
				default: 0
			},
			leftPadding: {
				type: Number,
				default: 20
			},
			background: {
				type: String,
				default: "#fff"
			}
		},
		computed: {
			boxStyle: function() {
				return {
					height: this.height + 'rpx',
					background: 'transparent'
				}
			},
			contentBoxStyle: function() {
				return {
					height: this.height + 'rpx',
					background: this.background,
					...this.position === 'bottom' ? {
						bottom: 0
					} : {
						top: 0
					}
				}
			},
			contentStyle: function() {
				return {
					height: `calc(100% - ${this.topPadding * 2}rpx)`,
					width: `calc(100% - ${this.leftPadding * 2}rpx)`,
					left: this.leftPadding + 'rpx',
					bottom: this.topPadding + 'rpx'
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.sticky-bottom-box {
		display: flex;
		position: relative;
		width: 100vw;

		.sticky-bottom-content-box {
			position: fixed;
			width: 100vw;
			left: 0;
			z-index: 99;

			.sticky-bottom-content {
				position: relative;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
		}
	}
</style>